<style type="text/css">
.title{
  -moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px;
  box-shadow:0 0 20px black,20px 15px 30px yellow,-20px 15px 30px lime,-20px -15px 30px blue,20px -15px 30px red;  width:50%; margin:30px; text-align:center; background:#111; color:#fff; }
#r0{
  border:1px solid #111;
}
#top,#left,#right,#bottom{ /*background:#111;*/ color:#111; clear:none; }
/*#top,#left,#right,#bottom *{ float:left;  }*/
#top input,#left input,#right input,#bottom input{ float:left; width:5em; border:0; padding-right:2px; }
span{ float:left; background:#a22; color:#f22; padding:2px 9px; }
label{ display:block; float:left; width:90px; overflow:auto; background:#efe; text-align:right; }
textarea{ border:0; }
select{ float:left; }
canvas{ float:left; background:#cccccf; }
.colorpicker{ position:relative; top:-8px; width:32px; height:32px; }
.slider1{ color:red; }
#top table,#left table,#right table,#bottom table{float: left; }
</style>

<div id="top">
  <textarea id="deb" rows="9" cols="80"></textarea>
</div>
<div id="left">
<span>name</span><input/><label>id</label><input type="checkbox"/><label>class</label><input type="checkbox"/>
<br/>
<label>width</label><input onchange="fontsize(this.value)"/>
<label>height</label><input onchange="fontsize(this.value)"/>
<label>top</label><input onchange="fontsize(this.value)"/>
<label>right</label><input onchange="fontsize(this.value)"/>
<label>bottom</label><input onchange="fontsize(this.value)"/>
<label>left</label><input onchange="fontsize(this.value)"/>
<br/>
<div class="slider"></div>
<div class="slider0"></div>

<br/>
<span>float</span>
<input type="radio" id="float" value="left"/><label>left</label>
<input type="radio" id="right" value="right"/><label>right</label>
<span>overflow</span>
<select onchange="overflow(this.value);"><option selected="selected"></option><option>visible</option><option>scroll</option><option>inherit</option><option>auto</option></select>
<span>display</span>
<select id="display" onchange="display(this.value)"><option selected="selected"></option><option>none</option><option>block</option><option>inline</option></select>
<br/>
<span>font</span>
<label>size</label><input id="fontsize" onchange="fontsize(this.value)"/>
<label>font family</label><input onchange="fontfamily(this.value)"/>
<label>generic</label><select onchange="fontgen(this.value)"><option selected="selected">sans serif</option><option>serif</option><option>monospace</option><option>fantasy</option><option>cursive</option></select>
<span>color</span>
<label>text</label><canvas class="colorpicker"></canvas>
<label>background</label><canvas class="colorpicker"></canvas>
<br/>
<span>opacity</span><div class="slider0"></div>
<br/>
<span>border</span>
<label>size</label><input onchange="bordersize(this.value)"/>
<label>style</label><select onchange="borderstyle(this.value)"><option selected="selected"></option><option>solid</option><option>dashed</option><option>dotted</option></select>
<label>radius</label><input onchange="borderradius(this.value)"/>
<br/>
<table><tr>
<td><span>box-shadow</span></td>
<td><label>1st shadow</label><label>color</label><canvas class="colorpicker"></canvas><label>width</label><input/><label>height</label><input/><label>radius</label><input/></td>
</tr>
<tr><td></td><td><label>2nd shadow</label><label>color</label><canvas class="colorpicker"></canvas><label>width</label><input/><label>height</label><input/><label>radius</label><input/><br/></td></tr>
<tr><td></td><td><label>3rd shadow</label><label>color</label><canvas class="colorpicker"></canvas><label>width</label><input/><label>height</label><input/><label>radius</label><input/><br/></td></tr>
<tr><td></td><td><label>4th shadow</label><label>color</label><canvas class="colorpicker"></canvas><label>width</label><input/><label>height</label><input/><label>radius</label><input/><br/></td></tr>
</table>
</div>
<div style="float:left"><h2 class="title">result</h2></div>
<div id="r0">
<u>Container element with content element below after a paragraph ending</u><p/>
  <div id="r1">
The thoracic block was extended from T5 to T10 using 0.125% bupivacaine in aliquots of 2–3 ml, with 50 μg fentanyl.
n	33
power	80%
α error	0.05
P errir 0.114

		GA	GT
patients	33	33
anastomic leak	0	4
mortalities	0	4
nutrient cycle  4+-2	3+-1
P error		0.006	0.012

  </div>
</div>

<video></video>

<script src="js/string/lpad.js" type="text/javascript"></script>
<script type="text/javascript">//<![CDATA[
var deb=document.getElementById('deb');

function mandelbrot(x,y,width,height){
  x=2.5*(x/width-0.5);
  y=2*(y/height-0.5);
  var x0=x,y0=y,iteration=0,max_iteration=100;
  while(x*x+y*y<=4 && iteration<max_iteration){
    var xtemp=x*x-y*y+x0;
    y=2*x*y+y0; x=xtemp; iteration++;
  }
  return Math.round(255 * iteration / max_iteration);
}


var mcslider=function(e){
    var el=e.target;
    el.innerHTML='z:'+el.value;
    event.stopPropagation(); return false;
}
var mdslider=function(e){
    var el=e.target;
    el.innerHTML='z:'+e.which;
    event.stopPropagation();
    return false;
}
var muslider=function(e){
    var el=e.target;
    el.innerHTML='z:'+el.value;
    event.stopPropagation();
    return false;
}
var mmslider=function(e){
    var el=e.target;
    var x=e.clientX-el.offsetLeft;
    var y=e.clientY-el.offsetTop;
    var h=el.offsetHeight;
    var w=el.offsetWidth;
    var vx=((x<=el.offsetWidth)?x:el.offsetWidth);
    el.innerHTML='<svg id="aelgoa" width="'
    +w+'" height="'
    +h+'" viewBox="0 0 '
    +w+' '+h+'">\
<rect x=2 y=2 width='
    +(w-x-2)+' height='+(h-2)+' fill=none stroke="black">\
<circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">\
            <animate attributeName="cx" from="0" to="100" dur="5s" repeatCount="indefinite" />\
       </circle>\
</svg>';
    event.stopPropagation();
    return false;
}


var mm=function(e){
    var el=e.target;
    var x=e.clientX-el.offsetLeft;
    el.innerHTML='mm:'+e.which+':'+(e.clientX-el.offsetLeft)+'*'+(e.clientY-el.offsetTop)+el;
    event.stopPropagation();
    //return false;
}


<?php include'widgets/widgets.php'; ?>


widgets();
document.getElementById('fontsize').select();
var r0=document.getElementById('r0'),r1=document.getElementById('r1');

deb.innerHTML+="\nscrollbar:"+scrollbarsize();
var style={
  'floar':'',
  'overflow':'',
  'clear':'',
  'display':'',
  'font':'',
  'fontsize':'',
  'fontfamily':'',
  'fontgen':'sans-serif',
  'border':'',
  'bordersize':'',
  'borderstyle':'',
  'bordercolor':'',
  'borderradius':''
};

function overflow(s){
  if(s!=''){
    alert('overflow jja straks');
  }
}

function fontsize(s){
  style["fontsize"]=s;
  r1.style.fontSize=style["fontsize"];
  font(); }
function fontfamily(s){
  style["fontfamily"]='"'+s+'"';
  r1.style.fontFamily=style["fontfamily"]+' '+style["fontgen"];
  font(); }
function fontgen(s){
  style['fontgen']=s;
  r1.style.fontFamily=style["fontfamily"]+' '+style["fontgen"];
  font(); }

function font(){
  style["font"]=
    style["fontsize"]+
    style["fontfamily"]+' '+
    style["fontgen"]+';'
  ;
  deb.innerHTML=style["font"];
}

function bordersize(s){
  if(s!=''){
    if(style["border"]==""){ style["borderstyle"]="solid"}
    style["bordersize"]=s;
    border();
  }
  else{ style["border"]=""; r1.style.border="none"; }
}

function borderstyle(s){
  style["borderstyle"]=s;
  border();
}

function borderradius(s){
  r1.style.borderRadius=s; // w3c
  r1.style.MozBorderRadius=s; // mozilla
  r1.style.WebkitBorderRadius=s;
  style["borderradius"]="-moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;";
  //if padding<15 complain
}

function border(){
  style["border"]=
    style["bordersize"]+" "+
    style["borderstyle"]+" "+
    style["bordercolor"];
  r1.style.border=style["border"];
  deb.innerHTML=style["border"];
}

function fullscreen(){
  var view=document.getElementById("view");
  if(view.style.position=="absolute")view.style.position="relative";
  else{
    view.style.position="absolute";
    view.style.top="0";
    view.style.left="0";
    view.style.width="100%";
    view.style.height="100%";
  }
}


function scrollbarsize(){
  var inner=document.createElement('p');
  inner.style.width="100%"; inner.style.height="200px";
  var outer=document.createElement('div');
  outer.style.position="absolute"; outer.style.visibility="hidden";
  outer.style.top="0px"; outer.style.left="0px";
  outer.style.width="200px"; outer.style.height="150px";
  outer.style.overflow="hidden";
  outer.appendChild (inner);
  document.body.appendChild(outer);
  var w1=inner.offsetWidth;
  outer.style.overflow='scroll';
  var w2=inner.offsetWidth;
  if(w1==w2)w2=outer.clientWidth;
  document.body.removeChild(outer);
  return w1-w2;
};


//ajaxjs('plugin/styled/stylset.php?el=r0&font=29pt%20sans-serif');

function ajaxjs(cmd){
  if (window.XMLHttpRequest){ var x=new XMLHttpRequest(); }
  else{ var x=new ActiveXObject("Microsoft.XMLHTTP"); }
  x.onreadystatechange=function(){ if(x.readyState==4 && x.status==200){ eval(x.responseText); }}
  x.open("GET",cmd,true); x.send(); }
//TV inside a painting website
//elk begrip moet beschouwd worden als een ideaal
//
//
//

function f_clientWidth(){
return f_filterResults(
window.innerWidth?window.innerWidth:0,
document.documentElement?document.documentElement.clientWidth:0,
document.body?document.body.clientWidth:0
);
}
function f_clientHeight(){
return f_filterResults(
window.innerHeight?window.innerHeight:0,
document.documentElement?document.documentElement.clientHeight:0,
document.body?document.body.clientHeight:0
);
}
function f_scrollLeft(){
return f_filterResults(
window.pageXOffset?window.pageXOffset:0,
document.documentElement?document.documentElement.scrollLeft:0,
document.body?document.body.scrollLeft:0
);
}
function f_scrollTop(){
return f_filterResults(
window.pageYOffset?window.pageYOffset:0,
document.documentElement?document.documentElement.scrollTop:0,
document.body?document.body.scrollTop:0
);
}
function f_filterResults(n_win, n_docel, n_body){
var n_result = n_win?n_win:0;
if(n_docel &&(!n_result ||(n_result > n_docel)))
n_result = n_docel;
return n_body &&(!n_result ||(n_result > n_body))?n_body:n_result;
}
//]]></script>